<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
FU		<style>
			div {
				margin: 200px;
				text-align: center;
			}

			button {
				margin: 0 20px;
			}

			.red {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>
			<button class="red">新闻</button>
			<button>娱乐</button>
			<button>音乐</button>
			<button>视频</button>
		</div>
	</body>
</html>
<script>
	var btns = document.getElementsByTagName('button');

	// 4
	for (var i = 0; i < btns.length; i++) {

		btns[i].onclick = function() {
			// btns[i].className = "";
			for (var j = 0; j < btns.length; j++) {
				btns[j].className = "";
			}
			this.className = "red";
		};
	}

	// for (var i = 0; i < 10; i++) {

	// }

	// console.log(i);


</script>